import React, {useState, useRef, useEffect} from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEdit, faTrash, faTimes } from '@fortawesome/free-solid-svg-icons'
// import BScroll from 'better-scroll'
import './FileList.scss'
import PropTypes from 'prop-types'
import useKeyPress from '../hooks/useKeyPress'
import useContextMenu from '../hooks/useContextMenu'
import { getParentNode } from '../utils/help'
const FileList = ({files, onFileClick, onSaveEdit, onFileDelete}) => {
    const [ editStatus, setEditStatus] = useState(false)
    const [ value, setValue] = useState('')
    // const [ bScroll, setBScroll] = useState(null)
    const closeSearch = (editItem) => {
        setEditStatus(false)
        setValue('')
        if(editItem.isNew) {
            onFileDelete(editItem.id)
        }
    }
    
    const enterPressed = useKeyPress(13)
    const escPressed = useKeyPress(27)
    const clickedItem = useContextMenu([{
        label: '打开',
        click: () => {
                const parentElement = getParentNode(clickedItem.current, 'file-item')
                if(parentElement) {
                   onFileClick(parentElement.dataset.id)
                }
            }
        },{
            label: '重命名',
            click: () => {
                const parentElement = getParentNode(clickedItem.current, 'file-item')
                if(parentElement) {
                    setEditStatus(parentElement.dataset.id)
                    setValue(parentElement.dataset.title)
                }
            }
        },
        {
            label: '删除',
            click: () => {
                const parentElement = getParentNode(clickedItem.current, 'file-item')
                if(parentElement) {
                    onFileDelete(parentElement.dataset.id)
                }
            }
        }],'#wrapper')
    // useEffect(() => {
    //     const refList = document.querySelector('#wrapper')
    //      // eslint-disable-next-line 
    //     const bScroll = new BScroll(refList, {
    //         probeType: 1,
    //         momentumLimitDistance:15 , 
    //         momentum: true,
    //         mouseWheel: true, 
    //         scrollX: false,
    //         scrollY: true,
    //         click: true,
    //         pullUpLoad: {
    //             threshold: 50
    //         }
    //     }) 
    //     bScroll.on('pullingUp',()=>{
    //         bScroll.finishPullUp() 
    //     })
    //     setBScroll(bScroll)
    // },[])
    
    //  eslint-disable-next-line
    useEffect(() => {
        const editItem = files.find(file => file.id === editStatus)
        if(enterPressed && editStatus && value.trim() !== '') {
            onSaveEdit(editItem.id, value, editItem.isNew)
            setEditStatus(false)
            setValue('')
        }
        if(escPressed && editStatus) {
            closeSearch(editItem)
        }
    })

    useEffect(() => {
        const newFile = files.find(file => file.isNew)
        if(newFile) {
            setEditStatus(newFile.id)
            setValue(newFile.title)
        }
        // if(bScroll) {
        //     setTimeout(() => {
        //         bScroll.refresh() 
        //         bScroll.scrollTo(0, bScroll.maxScrollY)
        //     }, 100)
        // }
         //  eslint-disable-next-line
    }, [files]) 
    let node = useRef(null)
    return (
        <div className="file-list" id="wrapper">
            <ul className="content list-group list-group-flush">
            {
                files.map(file => (
                    <li data-id={file.id} data-title={file.title} className="list-group-item bg-light d-flex align-items-center file-item" key={file.id}>
                       { 
                        (file.id !== editStatus) && <> 
                        
                            {/* <span className="col-1 px-0"><FontAwesomeIcon size="lg" title="markdown" icon={faMarkdown}></FontAwesomeIcon></span> */}
                            <span className="col-9 c-link px-0" onClick={(event) => { onFileClick(file.id) }}>{file.title}</span>
                            <button 
                                className="btn icon-button col-1 px-0 mr-2" 
                                type="button" 
                                onClick={() => { setEditStatus(file.id); setValue(file.title)}}>
                                <FontAwesomeIcon title="编辑" icon={faEdit}></FontAwesomeIcon>
                            </button>
                            <button className="btn icon-button col-1 px-0" onClick={() => { onFileDelete(file.id) }} type="button">
                                <FontAwesomeIcon title="删除" icon={faTrash}></FontAwesomeIcon>
                            </button>
                        </>
                       }
                       {
                        (file.id === editStatus ) &&  <>
                        <div className="d-flex col-12 px-0 justify-content-between align-items-center input-group-sm">
                            <input placeholder="请输入文件名称" ref={node} className="form-control col-10" value={value} onChange={(e) => {setValue(e.target.value)}}/>
                            <button type="button" className="btn col-2 icon-button btn-sm btn-primary mgl6" onClick={() => { closeSearch(file) } }>
                                <FontAwesomeIcon size="lg" title="关闭" icon={faTimes} />
                            </button>
                        </div>
                        </>
                       }
                    </li>
                ))
            } 
            </ul>
        </div>
    )
}
FileList.propTypes = {
    files: PropTypes.array,
    onFileClick: PropTypes.func,
    onFileDelete: PropTypes.func,
    onSaveEdit: PropTypes.func
}
export default FileList